---
import PocketBase from 'pocketbase';
const pb = new PocketBase('https://autoreport.site:8888');
const url = 'https://autoreport.site:8888/api/files/nh5ero5xp0d92qs'

const records = await pb.collection('advantage_mobile_ru').getFullList({
    sort: 'created',
});

const list = records.map((item: any) => {
  return {
    icon: `${url}/${item.id}/${item.icon}`,
    title: item.title,
    content: item.content,
    tab: item.tab,
  }
})
const List1 = list.slice(0, 2)
const List2 = list.slice(2)
const getParams = (id:any) => {
  return `/ru/case?id=${id}`
}
---

<div class="bg-white w-full h-[820px] py-[60px]">
  <div class="text-[40px] text-[#333] font-[700] mx-[10%]">Основные преимущества</div>
  <div class="flex mx-[10%] mt-[60px] justify-between items-center space-x-4">
    {
      List1.map((item: any) => (
        <div class="flex bg-[#F0F2F5] h-[210px] flex-1 relative">
          <img
            src={item.icon}
            alt="logo"
            width="120"
            height="120"
            class="my-[25px] mr-[20px] ml-[10px]"
          />
          <div>
            <h4 class="mt-[15px] text-[16px] pr-4 text-[#333] font-[700]">
              {item.title}
            </h4>
            <p
              style="word-break:break-word;"
              class="mt-[8px] pr-4 text-[14px] text-[#999] textbox font-[400] textbox"
            >
              {item.content}
            </p>
           <div style="position: absolute; right: 10px; bottom: 10px; color: rgb(67, 99, 212);">
            <a href={getParams(item.tab)}>Соответствующие случаи</a>
           </div>
          </div>
        </div>
      ))
    }
  </div>
  <div style="position: relative; margin: 50px 0;">
    <div
      style="width: 100%; height: 2px; border-top: 2px dashed rgb(67, 99, 212);"
    >
    </div>
  </div>
  <div
    class="flex ml-[15%] mr-[5%] mt-[60px] justify-between items-center space-x-4"
  >
    {
      List2.map((item: any) => (
        <div class="flex flex-1 bg-[#F0F2F5] h-[210px] relative">
          <img
            src={item.icon}
            alt="logo"
            width="120"
            height="120"
            class="my-[25px] mr-[20px] ml-[10px]"
          />
          <div>
            <h4 class="mt-[15px] text-[16px] pr-4 text-[#333] overflow-ellipsis overflow-hidden font-[700]">
              {item.title}
            </h4>
            <p
              style="word-break: break-word;"
              class=" mt-[8px] pr-4 text-[14px] text-[#999] textbox font-[400] textbox"
            >
              {item.content}
            </p>
            <div style="position: absolute; right: 10px; bottom: 10px; color: rgb(67, 99, 212);">
            <a href={getParams(item.tab)}>Соответствующие случаи</a>

           </div>
          </div>
        </div>
      ))
    }
  </div>
</div>

<style>
  .textbox {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
</style>
